<template>
  <div>
    <h2>拖拽form</h2>
    <div class="form-container">
      <make-form :formItems="formItems"
                 @getData="handleGetFormData"
                 @handleonEnd="handleonEnd"
                 @handleDel="handleDel" />
      <div class="content-add-btn">
        <el-button type="primary"
                   size="medium"
                   @click="addOptions">新增字段</el-button>
      </div>
      <div class="btns-group">
        <el-button type="primary"
                   @click="handleSave">保存</el-button>
        <el-button @click="clearSubmit"
                   type="primary">提交</el-button>
      </div>
    </div>

    <add-options :isAdd.sync='isAdd'
                 :allTypes='allTypes'
                 :len='formItems.length'
                 @handleReturnOption='handleAdd' />
    <div>
      <el-tag>默认排序 :</el-tag> {{ oldList }}
    </div>
    <div>
      <el-tag>拖拽后的排序:</el-tag> {{ newList }}
    </div>
  </div>
</template>

<script lang='ts'>
import { Component, Vue } from 'vue-property-decorator'
import AddOptions from './components/AddOptions.vue'
@Component({
  name: 'drag-form',
  components: {
    AddOptions
  }
})
export default class extends Vue {
  // 案件要素信息
  private allProjects: any[] = [
    { desc: '原告信息', id: '', elementList: [] },
    { desc: '被告信息', id: '', elementList: [] },
    { desc: '诉求概况', id: '', elementList: [] }
  ]

  private labelPosition = 'right'
  private oldList: object[] = [] // 默认的排序
  private newList: object[] = [] // 调整后的排序
  private isAdd = false // 新增内容弹窗显示隐藏的控制变量
  private formItems: any[] = [
    {
      order: 1,
      id: 1,
      label: '标的额1',
      prop: 'money',
      type: 0,
      fixed: true,
      isWrite: '1'
    },
    {
      order: 2,
      id: 2,
      label: '合同签订日期2',
      prop: 'date',
      type: 0,
      isWrite: '0'
    },
    {
      order: 3,
      id: 3,
      type: 4,
      isWrite: '1',
      label: '性别3',
      prop: 'sex',
      selects: [
        { desc: '男', value: 1 },
        { desc: '女', value: 2 }
      ]
    }
  ]

  private allTypes: any[] = [
    { label: '文本框', value: 0 },
    { label: '数值', value: 1 },
    { label: '文本域', value: 2 },
    { label: '日期', value: 3 },
    { label: '下拉列表框', value: 4 },
    { label: '单选框', value: 5 },
    { label: '复选框', value: 6 },
    { label: '行政区划级联选择', value: 7 },
    { label: '身份证号码选择', value: 8 }
  ]

  private formLabelAlign: object = {
    name: '',
    region: '',
    type: '',
    date: '',
    during: ''
  }

  handleGetFormData (form: object) {
    console.log(form)
  }

  created () {
    this.initData()
  }

  initData () {
    this.oldList = this.formItems.map((v) => {
      return {
        id: v.id,
        sort: v.order
      }
    })
    this.newList = this.oldList.slice()
  }

  // 根据id删除
  handleDel (record: object) {
    this.$confirm('此操作将永久删除该项, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
      .catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    console.log(record)
  }

  handleonEnd (arr: any[]) {
    // this.formItems = JSON.parse(JSON.stringify(arr))
    this.newList = arr.map((v) => {
      return {
        id: v.id,
        sort: v.order
      }
    })
  }

  handleSave () {}

  clearSubmit () {}

  addOptions () {
    this.isAdd = true
  }

  // 新增字段
  handleAdd (option: object) {
    option.id = option.order // 伪造id
    option.prop = 'option' + option.order // 伪造prop
    this.formItems.push(option)
    this.oldList.push({ id: option.id, sort: option.order })
    this.newList.push({ id: option.id, sort: option.order })
    console.log('添加后的form：-------')
    console.log(this.formItems)
  }
}
</script>

<style lang="scss" scoped>
.form-container {
  width: 600px;
  .content-add-btn,
  .btns-group {
    text-align: center;
    margin-bottom: 20px;
  }
}
</style>
